封装React AntD的upload上传组件 | 您所在的位置:网站首页 › antd的form组件配合upload › 封装React AntD的upload上传组件 |
![]() 上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等。至于为何要把上传组件封装成一个公共的、可复用的组件,在前两篇文章封装react antd的form表单组件、封装react antd的表格table组件中已经作了很多介绍,这里同样不再赘述。 有朋友觉得这些功能组件在各种前端框架满天飞的今天都大同小异、大差不差,甚至觉得Level有点Low。哈哈,其实事实也确实是这样的,我们去二次封装这些原本已基本成熟的框架组件,逼格也确实不高,且随心所欲的空间也不大,但我觉得这并不妨碍我们的日常开发。我们作为前端er,大部分工作都是在产品er的需求阴影下,顶着发际线越来越高的蒙圈脑袋,认认真真的砌墙,在胆战心惊、如履薄冰地试探“今晚会否加班”的心态中活过每一个白天,已经是阿弥陀佛了。如果再碰上一个好的领导,在每一个阶段的开发任务结束后能再请我们去嗨皮一番,那就真是“今天好天气,老狼请吃鸡了。” 所以,我们能做的,只有简化开发步骤,提高组件的复用率,再完美一点就是提供可定制化的封装组件了。但这是个仁者见仁智者见智的看法,我还是很尊重认可有独立思考能力的人! 话不多说,先来介绍一下封装过程中所关注的几个点: 上传文件的大小上传文件势必需要我们去关注所上传文件的大小。这个功能点,我们放在antd所提供的upload组件的beforeUpload方法中,当然beforeUpload方法我们也是封装在upload组件中,通过使用时传入的配置来控制文件大小。 上传文件的格式或类型上传文件的格式或类型也是我们必须要去关注的一个点,比如这个上传控件只能上传图片,那个上传控件只能上传excel文档等等,我们可以使用antd所提供的upload组件的accept来控制,当然accept也是被封装在了upload组件中。 自定义上传的方法antd所提供的upload组件中给我们提供了一个action的API,官方的解释是action:上传的地址,跟form的表单提交有点类似。这种的上传方式我们不太好控制,我们会使用upload组件的customRequest方法来自定义上传的实现,官方对其的解释是:通过覆盖默认的上传行为,可以自定义自己的上传实现。 关于上传功能,我们需要注意的也基本就是以上三点,至于我们是上传到自己的服务器还是第三方如阿里云,则不在这篇文章的介绍范围了。下面来看一下具体实现。 外甥打灯笼——照舅(照旧)先放一张效果图:
代码中注释的部分模拟的就是上传到服务器,不过这个地址是从antd上抄来的,貌似不能用。 2、upload组件的使用方法: import React, { useState } from 'react' import Upload from './Upload' const UploadComp = () => { const config = { accept: 'image', //接受上传的文件类型:zip、pdf、excel、image,也可以是文件类型所组成的数组类型如:['image', 'pdf'],则只可以上传图片或pdf类型的文件,也可以不传或为空或为'*',则任何类型的文件都可以上传 max: 1, //限制上传文件大小 }; const [fileList, setFileList] = useState([]) const onPreview = file => { console.log(file) } const onSuccess = res => { //useState不能向数组中push数据,只能通过这样的方式来push数据 setFileList([...fileList, res]) } return {fileList.length >= 2 ? null : '上传'} } export default UploadComp对于封装的这个upload组件,还有一点想说的就是我只是按照antd的API做了封装,然后再把这些API传递给upload组件。如果你说我想把上传两个字给成按钮形式的可以吗?当然可以,只要antd是如何做到的,我这里就也是如何做到的。所以参照antd的官方实现方法即可。至于其他配置,如果你有实际需求,再往组件中添加就行了。 最后还是再贴一下本次封装所用到的各个包的版本: react: 16.8.6, react-dom: 16.8.6, react-router-dom: 5.0.0, antd: 4.3.5, @babel/core: 7.4.4, babel-loader: 8.0.5 作者:小坏 出处:http://tnnyang.cnblogs.com 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。 |
CopyRight 2018-2019 实验室设备网 版权所有 |